<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>今天吃什么_login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-image: url(image/11.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            background-attachment: scroll;
        }
        .box {
            border-radius: 15px;
            width: 400px;
            height: 300px;
            background-color: rgba(0,0,0,0.3);
            margin: 0 auto;
            margin-top: 200px;
            padding: 20px 50px;
            text-align: center;
        }
        .box .loginBox {
            font: 50px "times";
            color: white;
        }
        .box .inputBox {
            margin-top: 30px;
        }
        .box .inputBox .textBox {
            color :white;
            margin-top: 20px;

        }
        .box .inputBox .textBox input {
            margin-left: 10px;
            border: 0;
            padding: 10px 10px;
            border-bottom: 2px solid white;
            background-color: rgba(0,0,0,0);
            color: white;
            outline: none;
        }
        form {
            display: inline-block;
        }
        .box .submitBox {
            margin-top: 30px;
            width: 125px;
            height: 30px;
            color: white;
            border: 0;
            border-radius: 20px;
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
            outline: none;
        }
        .box .submitBox:hover {
            background-image: linear-gradient(to left, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
            box-shadow: 2px 2px 10px gray;
        }
    </style>
    <script src="js/axios.js"></script>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div class="box">
    <div class="loginBox">Login</div>
    <div class="inputBox">
        <div class="textBox">
            <label for="Username">账号</label>
            <input type="text" v-model="studentName" placeholder="用户名" id="Username"/>
        </div>
        <div class="textBox">
            <label for="Password">密码</label>
            <input type="password" v-model="studentPwd" placeholder="密码" id="Password"/>
        </div>
    </div>
    <div>
        <form method="post">
            <input class="submitBox" @click.prevent="LoginUser()" type="submit" value="登录" />
            <input @click.prevent="regist" class="submitBox" type="submit" value="注册" />
        </form>
    </div >
</div>

<script>
    const app = new Vue({
        el:".box",
        data: {
            studentName:"",
            studentPwd:"",

        },
        methods:{
            LoginUser(){
                axios.get("",{params:}).then(date =>{

                })
            },
            regist(){
                location.href="/regist";
            }
        }
    })
</script>
</body>
</html>